import React, { Component } from 'react'
import styles from './index.less'
import { connect } from 'dva';
import { Avatar , Tag, Modal, Form, Input} from 'antd';
import groupBy from 'lodash/groupBy';
import { NoticeIcon } from 'ant-design-pro';
import HeaderDropdown from './HeaderDropdown';
import moment from 'moment';
import avatar from '../../assets/global/avatar.png'
import { setData, getData, removeData } from '@/utils/localData'
import router from 'umi/router';

import {
    Menu, Icon,
} from 'antd';

@connect(({ user }) => ({ 

}))
class RightContent extends Component {

    constructor(props) {
        super(props);
        this.state = {
            
        };
    }
    handleOk = () => {
        this.props.form.validateFields(
            (err) => {
              if (!err) {
                const { dispatch, form:{ getFieldsValue, setFieldsValue } } = this.props
                const { oldPwd, newPwd } = getFieldsValue()
                console.log(getFieldsValue())
                this.setState({
                    visible: false
                })
                dispatch({
                    type: 'user/fetchUpdateMyPwd',
                    payload: {
                        oldPwd: oldPwd,
                        newPwd: newPwd
                    }
                })
              }
            },
          );

    }

    handleCancel = (e) => {
        this.setState({
            visible: false,
        });
    }

    render() {
        const menu = (
            <Menu className={styles.menu} selectedKeys={[]} onClick={(a)=>{console.info(a)}}>
                <Menu.Item key="setting" onClick={()=>{
                    this.setState({
                        visible: true,
                    });
                }}>
                <Icon type="setting" />
                <span>修改个人密码</span>
                </Menu.Item>
                <Menu.Divider />
                <Menu.Item key="logout" onClick={()=>{
                    const { dispatch } = this.props
                    dispatch({
                        type: 'user/fetchLogout',
                        payload: {}
                    })
                }}>
                <Icon type="logout" />
                <span>注销</span>
                </Menu.Item>
            </Menu>
        );
        
        const {
            form: { getFieldDecorator, setFieldsValue },
            dispatch
        } = this.props

        return (
            <div className={styles.userMenu}>
                <HeaderDropdown overlay={menu}>
                    <div className={styles.item}>
                        <Avatar
                            size="small"
                            className={styles.avatar}
                            src={avatar}
                            alt="avatar"
                        />
                        <span>{getData("username")}</span>
                    </div>
                </HeaderDropdown>
                <Modal
                    title="修改个人密码"
                    visible={this.state.visible}
                    onOk={this.handleOk}
                    onCancel={this.handleCancel}
                    okText={"确定"}
                    cancelText={"取消"}
                    >   
                    <Form  >
                        <Form.Item>
                            {getFieldDecorator('oldPwd', {
                            rules: [{
                                required: true, message: '请输入旧密码',
                            }],
                            })(
                            <Input placeholder={'旧密码'} />
                            )}
                        </Form.Item>
                        <Form.Item>
                            {getFieldDecorator('newPwd', {
                            rules: [{
                                required: true, message: '请输入新密码',
                            }],
                            })(
                            <Input placeholder={'新密码'}/>
                            )}
                        </Form.Item>
                        <Form.Item>
                            {getFieldDecorator('newPwdRe', {
                            rules: [{
                                required: true, validator:(rule, value, callback)=>{
                                    const { form:{ getFieldsValue } } = this.props
                                    const { newPwd } = getFieldsValue()
                                    if(!value || value.length <= 0){
                                        callback("不能为空")
                                    }
                                    if(newPwd !== value){
                                        callback("密码输入不一致")
                                    }
                                    callback()
                                }
                            }],
                            })(
                            <Input placeholder={'重复'}/>
                            )}
                        </Form.Item>
                    </Form>
                </Modal>
            </div>
        )
    }
    
}

const MyForm = Form.create({})(RightContent);

export default MyForm
